<template>
	<div>
		<div class="search-bar" :class="{'hide-title': !titleVisible, 'hide-shadow': !shadowVisible}">
			<transition name="title-move">
				<div class="search-bar-titel-wrapper" v-show="titleVisible">
				<div class="title-text-wrapper">
					<span class="title-text title">{{$t('home.title')}}</span>
				</div>
				<div class="title-icon-shake-wrapper" @click="showFlapCard">
					<!-- 推荐按钮 -->
					<span class="icon-shake icon"></span>
				</div>
				</div>
			</transition>
			<div class="title-icon-back-wraper" :class="{'hide-title': !titleVisible}" @click="back">
				<!-- 返回按钮 -->
				<span class="icon-back icon"></span>
			</div>
			<div class="search-bar-input-wrapper" :class="{'hide-title': !titleVisible}">
				<!-- 占位DOM -->
				<div class="search-bar-blank" :class="{'hide-title': !titleVisible}"></div>
				<div class="search-bar-input">
					<span class="icon-search icon"></span>
					<input class="input"
						type="text"
						:placeholder="$t('home.hint')"
						v-model="searchText"
						@click="showHotSearch"
						@keyup.13.exact="search">
				</div>
			</div>
		</div>
		<hot-search-list v-show="hotSearchVisible" ref="hotSearch"></hot-search-list>
	</div>
</template>

<script>
import { storeHomeMixin } from '../../utils/mixin'
import HotSearchList from './HotSearchList'
export default {
	components: { HotSearchList },
	mixins: [storeHomeMixin],
	data() {
		return {
			searchText: '',
			titleVisible: true, // 控制标题的显示
			shadowVisible: false, // 控制阴影的显示与隐藏
			hotSearchVisible: false // 控制热门搜索组件的显示与隐藏
		}
	},
	watch: {
		offsetY(offsetY) {
			if (offsetY > 0) {
				this.hideTitle()
				this.showShadow()
			} else {
				this.showTitle()
				this.hideShadow()
			}
		},
		hotSearchOffsetY(offsetY) {
			if (offsetY) {
				this.showShadow()
			} else {
				this.hideShadow()
			}
		}
	},
	methods: {
		back() { // 点击返回
			if (this.offsetY > 0) {
				this.showShadow()
			} else {
				this.hideShadow()
			}
			this.hideHotSearch()
			if (this.hotSearchVisible) {
				this.hideHotSearch()
			} else {
				// 返回书架
				this.$router.push('/store/shelf')
			}
		},
		hideTitle() {
			// 隐藏标题栏
			this.titleVisible = false
		},
		showTitle() {
			// 显示标题栏
			this.titleVisible = true
		},
		hideShadow() {
			this.shadowVisible = false
		},
		showShadow() {
			this.shadowVisible = true
		},
		hideHotSearch() {
			this.hotSearchVisible = false
			if (this.offsetY > 0) {
				this.hideTitle()
				this.showShadow()
			} else {
				this.showTitle()
				this.hideShadow()
			}
		},
		showHotSearch() {
			this.hideTitle()
			this.hideShadow()
			this.hotSearchVisible = true
			this.$nextTick(() => { // 刷新DOM
				// 热门搜索页面归位
				this.$refs.hotSearch.reset()
			})
		},
		showFlapCard() { // 点击显示推荐框
			this.setFlapCardVisible(true)
		},
		search() {
			this.$router.push({
				path: '/store/list',
				query: {
					keyword: this.searchText
				}
			})
		}
	}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	@import "../../assets/styles/global.scss";
	.search-bar {
		position: relative;
		z-index: 150;
		width: 100%;
		height: px2rem(94);
		box-shadow: 0 px2rem(2) px2rem(2) 0 rgba(0, 0, 0, .1);
		&.hide-title {
			height: px2rem(52);
		}
		&.hide-shadow {
			box-shadow: none;
		}
		.search-bar-titel-wrapper {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: px2rem(42);
			.title-text-wrapper {
				width: 100%;
				height: px2rem(42);
				@include center;
			}
			.title-icon-shake-wrapper {
				position: absolute;
				right: px2rem(15);
				top: 0;
				height: px2rem(42);
				@include center;
			}
		}
		.title-icon-back-wraper {
			position: absolute;
			left: px2rem(15);
			top: 0;
			z-index: 200;
			height: px2rem(42);
			@include center;
			transition: height $animationTime $animationType;
			&.hide-title {
				height: px2rem(52);
			}
		}
		.search-bar-input-wrapper {
			position: absolute;
			left: 0;
			top: px2rem(42);
			display: flex;
			width: 100%;
			height: px2rem(52);
			padding: px2rem(10);
			box-sizing: border-box;
			transition: top $animationTime $animationType;
			&.hide-title {
				top: 0;
			}
			.search-bar-blank {
				flex: 0 0 0;
				width: 0;
				transition: all $animationTime $animationType;
				&.hide-title {
					flex: 0 0 px2rem(31);
					widows: px2rem(31);
				}
			}
			.search-bar-input {
				width: 100%;
				background-color: #f4f4f4;
				border-radius: px2rem(20);
				padding: px2rem(5) px2rem(15);
				box-sizing: border-box;
				border: px2rem(1) solid #eee;
				@include left;
				.icon-search {
					color: #999;
				}
				.input {
					width: 100%;
					height: px2rem(22);
					border: none;
					background: transparent;
					margin-left: px2rem(10);
					font-size: px2rem(12);
					color: #666;
					&:focus {
						outline: none;
					}
					&::-webkit-input-placeholder {
						color: #ccc;
					}
				}
			}
		}
	}
</style>
